<template>
  <div class="vertical-content">
    <el-container>
      <el-header style="position:relative;z-index:10;">
        <sim-toolbar />
      </el-header>
      <el-main>
        <CollapseComp :collapseList="CollapseCompList">
          <template #consoleTitle>
            <div class="collapseTitle">
              <span class="dropdown_img" @click.stop>
                <span>
                  <template v-for="item in ConsoleMenu" :key="item.label">
                    <span class="_action-btn g-pointer" :title="$t(item.label)" @click="consoleClick(item.value)">
                      <img class="_toolbar-icon" :src="item.icon" width="14" alt="" />
                    </span>
                    <span class="__spacer"></span>
                  </template>
                  <span class="_action-btn g-pointer" :title="$t('set')">
                    <sim-dropdown>
                      <el-badge is-dot >
                        <img src="statics/icons/simulation/iconaddfilter.svg" alt="">
                      </el-badge>
                      <img src="statics/images/mainpage/selectLogo.svg" alt="" />
                      <template #dropdown>
                        <sim-dropdown-item
                          v-for="item in StatusList"
                          :key="item.key"
                          :selected="item.value === currentlevel"
                          @click="changeStatus(item.value)">
                          <span class="select_item">
                            <el-icon v-if="item.value === currentlevel" class="sim_select_icon">
                              <Check />
                            </el-icon>
                            <span>
                              <img :src="'statics/icons/simulation/' + item.icon" alt="" />
                              {{ $t(item.key) }}
                            </span>
                          </span>
                        </sim-dropdown-item>
                      </template>
                    </sim-dropdown>
                  </span>
                </span>
              </span>
            </div>
          </template>
          <template #breakPointTitle>
            <div class="collapseTitle">
              <span class="dropdown_img" @click.stop>
                <span>
                  <template v-for="(item, index) in BreakPointMenu" :key="index">
                    <span class="_action-btn g-pointer" :title="$t(item.label)" @click="breakPointPanelClick(item.value)">
                      <img :src="'statics/icons/simulation/' + item.icon" alt="" />
                    </span>
                    <span v-if="index !== BreakPointMenu.length - 1 " class="__spacer"></span>
                  </template>
                </span>
              </span>
            </div>
          </template>
          <template #console>
            <sim-console ref="consoleRef" />
          </template>
          <template #scene>
            <sim-scene />
          </template>
          <template #operation>
            <sim-variable />
          </template>
          <template #breakPoint>
            <sim-break-point-panel ref="breakPointPanel" />
          </template>
        </CollapseComp>
      </el-main>
    </el-container>

  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import SimToolbar from "./Toolbar.vue";
import SimConsole from "./Console.vue";
import SimScene from "./Scene/Scene.vue";
import SimVariable from "./Variable/Variable.vue";
import SimBreakPointPanel from "./Breakpoints/BreakpointPanel.vue";
import { controller } from "@/engine/Controller";
import { Event, ipcRenderer } from "electron";
import * as remote from "@electron/remote";
import { ElMessageBox } from "element-plus";
import { Metaclasses } from "@/constants/constants";
import SimDropdown from "@/components/dropdown/Dropdown.vue";
import SimDropdownItem from "@/components/dropdown/DropdownMenuItem.vue";
import CollapseComp from '@/components/collapseComp/CollapseComp.vue';
import { ColorMap, StatusList, CollapseCompList, ConsoleMenu, BreakPointMenu } from '@/constants/ui';
import { useI18n } from "vue-i18n";
import { SubWinQueryParams } from "@/engine/types/Win";
import { loading } from "@/common/Loading";
import { SimType } from "@/engine/types/Controller";

/* entrace */
controller.serviceInit();

const { t } = useI18n();
const currentlevel = ref("INFO");
const changeStatus = async (value: string) => {
  currentlevel.value = value;
  await controller.simApi.consoleSetRecordLevel(value);
};

const dotColor = computed(() => {
  return ColorMap[currentlevel.value as string];
});

const breakPointPanel = ref();
const consoleRef = ref();
const consoleClick = (str: string) => {
  consoleRef.value[str] && consoleRef.value[str]();
};

const breakPointPanelClick = (str: string) => {
  console.info('breakPointPanelClick str: ', str);
  breakPointPanel.value[str] && breakPointPanel.value[str]();
};

onMounted(async () => {
  await controller.checkSimserviceStarted(async () => {
    await controller.simApi.consoleChangeLocale(controller.lang);
    controller.socketService?.start();
    await controller.autoLoadModelData();
    if (controller.instanceTable.isTableSim(controller.type as SimType)) {
      controller.toolbarService.initSimulation();
    } else {
      controller.breakpointsService.refreshFromModel();
      const queryInfoRes = (await controller.modelApi.modelInfo({
        modelId: controller.modelId,
        projectId: controller.projectId,
      })).data?.data;
    }
    loading.close();
  });

  ipcRenderer.on("SecondPluginInstance", (e: Event, data: SubWinQueryParams) => {
    const current_window = remote.getCurrentWindow();
    if (current_window.isMinimized()) current_window.restore();
    current_window.focus();
    ElMessageBox.confirm(t('sim_p_reopen'), t('warning'), {
      confirmButtonText: t('yes'),
      cancelButtonText: t('no'),
      type: "warning",
      closeOnClickModal: false
    }).then(async () => {
      console.info("SecondPluginInstance get data: ", data);
      controller.modelId = data.modelId;
      controller.type = data.type;
      controller.projectId = data.projectId;
      await controller.toolbarService.finishSimulation();
      controller.serviceInit();
      await controller.autoLoadModelData();
      if (controller.instanceTable.isTableSim(controller.type as SimType)) {
        controller.toolbarService.initSimulation();
      } else {
        controller.modelId = data.modelId;
        const queryInfoRes = (await controller.modelApi.modelInfo({
          modelId: controller.modelId,
          projectId: controller.projectId,
        })).data?.data;
      }
      controller.breakpointsService.refreshFromModel();
    });
  });

  controller.ipcService.breakpointChange();
});
</script>
<style lang="scss">
.select_item {
  padding: 0 5px;

  .sim_select_icon {
    position: absolute;
    left: 3px;
    margin-top: 5px;
  }
}

.vertical-content>.el-container>.el-header {
  --el-header-padding: 0px;
  --el-header-height: 50px;
}

.vertical-content {
  height: 100%;

  .collapseTitle {
    height: 100%;
    float: right;

    .__spacer {
      margin: 0 6px;
      width: 1px;
      height: 16px;
      display: inline-block;
      background: #dcdcdc;
    }

    ._action-btn {
      display: inline-flex;
      align-items: center;
      padding: 0 4px;
      height: 30px;

      &:hover {
        background: linear-gradient(107deg, #a3dbff 0%, #74c5f8 100%);
      }

      &:active {
        background: linear-gradient(107deg, #7fc8f6 0%, #3ea5e6 100%);
      }

      img {
        margin-right: 0;
      }

      .c-dropdown {
        .el-badge {
          margin-right: 6px;

          .el-badge__content {
            width: 6px;
            height: 6px;
            margin-top: 7px;
            margin-left: -3px;
            background-color: v-bind(dotColor);
          }
        }
      }
    }

    .dropdown_img {
      line-height: 30px;
      height: 100%;
      display: flex;
      align-items: center;

      .select_item {
        .el-icon {
          position: absolute;
          left: 0px;
        }
      }

      .c-dropdown {
        img {
          margin-bottom: 8px;
        }
      }

      .bkp-btns {
        width: 14px;
        height: 14px;
      }

      margin-right: 10px;
    }
  }

  .el-container {
    height: 100%;
  }

  .el-collapse {
    display: flex;
    flex-direction: column;
    height: calc(100% - 12px);
  }

  .el-collapse>.el-collapse-item {
    position: relative;

    &.is-active {
      flex: 1 0 0;
      height: 0;
      border-bottom: 1px solid var(--el-collapse-border-color);
    }

    .el-collapse-item__wrap {
      border-bottom: none;
      height: calc(100% - 49px);

      >.el-collapse-item__content {
        height: 100%;
      }
    }

    .collapseTitle {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .__spacer {
        margin: 0 6px;
        width: 1px;
        height: 16px;
        display: inline-block;
        background: #dcdcdc;
      }

      ._action-btn {
        display: inline-flex;
        align-items: center;
        padding: 0 4px;
      }

      .dropdown_img {
        line-height: 30px;
        height: 100%;
        display: flex;
        align-items: center;

        .select_item {
          .el-icon {
            position: absolute;
            left: 0px;
          }
        }

        .c-dropdown {
          img {
            margin-bottom: 8px;
          }
        }

        .bkp-btns {
          width: 14px;
          height: 14px;
        }

        margin-right: 10px;
      }
    }

    .el-collapse-item__header {
      padding-left: 30px;
      height: 28px;
    }

    .el-collapse-item__arrow {
      position: absolute;
      left: 12px;
    }
  }

  .el-collapse-item__header {
    padding-left: 8px;
    background-color: #ecf4ff;
  }
}

.el-collapse-item__content {
  border-top: 1px solid #dcdcdc;
  padding-bottom: 0px;
}
</style>
